Vue.component('custom-tree',{
  template: `
  <div>
  <div class="ul" v-for="item in treeData" :key="item.id">
    <slot :node="item" :data="treeData">
      <div
        class="li"
        :style="{
          paddingLeft: level * 27 + 'px'
        }"
        @click.stop="clickNode(item)"
      >
        <span
          v-if="item.type === 'dir'"
          :class="['icon-triangle', item.isOpen ? 'rotate' : 'rotateFalse']"
        ></span>
        <span>{{ item.name }}</span>
      </div>
    </slot>
    <custom-tree v-show="item.isOpen" :data="item.children" :level="level + 1">
      <template v-slot="{ node, data }">
        <slot :node="node" :data="data">
          <div
            class="li"
            :style="{
              paddingLeft: level * 27 + 'px'
            }"
            @click.stop="clickNode(node)"
          >
            <span
              v-if="item.type === 'dir'"
              :class="[
                'icon-triangle',
                item.isOpen ? 'rotate' : 'rotateFalse'
              ]"
            ></span>
            <span>{{ item.name }}</span>
          </div>
        </slot>
      </template>
    </custom-tree>
  </div>
</div>
  `,
  name: "custom-tree",
  data(){
    return {
      treeData: null
    }
  },
  props: {
    data: {
      type: Array,
      default: () => []
    },
    level: {
      type: Number,
      default: 1
    }
  },
  mounted() {
    this.treeData = this.data;
    this.treeData.forEach((node) => {
      node.level = this.level;
      this.$set(node, "isOpen", true);
    });
  },
  methods: {
    clickNode(node) {
      console.log(node.id)
      node.isOpen = !node.isOpen;
    }
  }
})
console.log(Vue)